<script setup lang="tsx">
import { nextTick, onMounted, ref } from "vue";
import { TableInstance } from "element-plus";

const tableData = ref([
  {
    id: 1,
    name: "Alice",
    age: 25,
    type: "No. 189, Grove St, Los Angeles",
    updateTime: "192093102930122222222222222222",
    system: "12333333333333333333333333",
    status: "120",
  },
  { id: 2, name: "Bob", age: 30, type: "No. 189, Grove St, Los Angeles" },
  { id: 3, name: "Charlie", age: 22 },
  { id: 3, name: "Dill", age: 22 },
]);
const column = [
  {
    label: "名称",
    prop: "name",
    width: 200,
  },
  {
    label: "类型",
    prop: "type",
  },
  {
    label: "更新时间",
  },
  {
    label: "系统内置",
    prop: "system",
    showOverflowTooltip: true,
  },
  {
    label: "状态",
    prop: "status",
  },
];
const refTable = ref<TableInstance>();

const page = ref(1);

onMounted(async () => {
  await nextTick();
});
</script>

<template>
  <el-card header="简单的表格实例">
    <nf-table
      ref="refTable"
      v-model:page="page"
      :data="tableData"
      :column="column"
      :max-height="300"
      stripe
      border
    >
    </nf-table>
  </el-card>
</template>

<style scoped lang="scss"></style>
